<template>
    <div :class="[prefixCls+'-notification']" :style="style" v-show="visible" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <i :class="[prefixCls+'-notification-icon'] + ' '+type" v-if="type"></i>
        <div :class="[prefixCls+'-notification-content']">
            <div :class="[prefixCls+'-notification-title']" v-if="title" v-html="title"></div>
            <div :class="[prefixCls+'-notification-desc']" v-html="content"></div>
        </div>
        <a :class="[prefixCls+'-notification-close']" @click="handleDele">{{btn}}</a>
    </div>
</template>
<script>
import {prefixCls} from '../prefix'

export default{
    name: `${prefixCls}Notification`,
    props : {
        title: String,
        content : {
            type : String,
            required : true
        },
        position: {
            type: String,
            default:'top'
        },
        type: String,
        btn : {
            type : String,
            default : ''
        }
    },
    computed: {
        style(){
            return {}
        }
    },
    data(){
        return {
            prefixCls: prefixCls,
            visible : true
        }
    },
    methods: {
        handleDele(){},
        handleMouseEnter(){},
        handleMouseLeave(){}
    }
}
</script>
